<template>
  <div class="flow-box">
    <el-row style="margin-bottom:20px;">
      <el-col :span="10" :offset="14" style="text-align:right;">
        <span>时间筛选：</span>
        <el-select v-model="timeWay" style="width:100px;">
          <el-option
            v-for="item in timeWayOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-date-picker
          v-show="timeWay== 'timeDay'"
          v-model="dayValue"
          align="right"
          type="date"
          placeholder="选择日期"
        />
        <el-date-picker
          v-show="timeWay== 'timeWeek'"
          v-model="WeekValue"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周"
        />
        <el-date-picker
          v-show="timeWay== 'timeMonth'"
          v-model="monthValue"
          type="month"
          placeholder="选择月"
        />
        <el-date-picker
          v-show="timeWay== 'timeCustom'"
          v-model="customValue"
          type="daterange"
          range-separator="|"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width:240px;"
        />
      </el-col>
    </el-row>
    <!-- 流量趋势 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>流量趋势</span>
      </div>
    </div>
    <div class="deal-list" style="margin:20px 0;">
      <div class="deal-item nth-1 clearfix">
        <div class="deal-item-class">
          <p class="item-title">
            <span>访客数</span>
            <el-tooltip
              class="item"
              effect="light"
              content="筛选时间内，全店各页面的访问人数，同一访客多次访问会进行去重"
              placement="top"
            >
              <i class="el-icon-info f14" />
            </el-tooltip>
          </p>
          <div class="item-data">
            <span>{{ dealList.visitor }}</span>
          </div>
        </div>
      </div>
      <div class="deal-item nth-2 clearfix">
        <div class="deal-item-class">
          <p class="item-title">
            <span>下单买家数</span>
            <el-tooltip
              class="item"
              effect="light"
              content="筛选时间内，点击商品购买页订阅按钮的用户数，点击一次购买按钮就会发起一次下单，一人多次下单记为一人"
              placement="top"
            >
              <i class="el-icon-info f14" />
            </el-tooltip>
          </p>
          <div class="item-data">
            <span>{{ dealList.orderBuyer }}</span>
          </div>
        </div>
        <div class="deal-item-class">
          <p class="item-title">
            <span>下单金额</span>
            <el-tooltip
              class="item"
              effect="light"
              content="筛选时间内，发起的订单金额之和（用户点击订购按钮为下单，下单后会生成一个待支付订单，下单后会进入结算流程"
              placement="top"
            >
              <i class="el-icon-info f14" />
            </el-tooltip>
          </p>
          <div class="item-data">
            <span>{{ dealList.orderMoney }}</span>
          </div>
        </div>
      </div>
      <div class="deal-item nth-3 clearfix">
        <div class="deal-item-class">
          <p class="item-title">
            <span>支付买家数</span>
            <el-tooltip class="item" effect="light" placement="top">
              <div slot="content">
                筛选时间内，结算成功的用户数，一个人多次结算记为一个（拼团
                <br />在成团时计入筛选，问答在回答后计入筛选，API导入订单不计入筛选）
              </div>
              <i class="el-icon-info f14" />
            </el-tooltip>
          </p>
          <div class="item-data">
            <span>{{ dealList.payBuyer }}</span>
          </div>
        </div>
        <div class="deal-item-class">
          <p class="item-title">
            <span>支付金额</span>
            <el-tooltip class="item" effect="light" placement="top">
              <div slot="content">
                筛选时间内，所有结算订单金额之和（拼团在成团时计入筛选，问
                <br />答在回答后计入筛选，API导入订单不计入筛选）
              </div>
              <i class="el-icon-info f14" />
            </el-tooltip>
          </p>
          <div class="item-data">
            <span>{{ dealList.payMoney }}</span>
          </div>
        </div>
        <div class="deal-item-class">
          <p class="item-title">
            <span>支付金额</span>
            <el-tooltip class="item" effect="light" placement="top">
              <div slot="content">筛选时间内，结算金额/付费用户数</div>
              <i class="el-icon-info f14" />
            </el-tooltip>
          </p>
          <div class="item-data">
            <span>{{ dealList.price }}</span>
          </div>
        </div>
      </div>
      <div class="deal-pic">
        <div class="pic"></div>
      </div>
      <div class="order-growth">
        <p class="growth-title">访问-下单转化率</p>
        <span class="percentage">{{ conversion.firstRatio }}</span>
      </div>
      <div class="order-pay-growth">
        <p class="growth-title">下单-结算转化率</p>
        <span class="percentage">{{ conversion.secondRatio }}</span>
      </div>
      <div class="pay-growth">
        <p class="growth-title">访问-结算转化率</p>
        <span class="percentage">{{ conversion.thirdlyRatio }}</span>
      </div>
    </div>
    <div style="margin:20px 0;">
      <div id="dealTendency" style="width:100%;height:340px;" />
    </div>
    <!-- 交易构成 -->
    <div class="class-nav clearfix">
      <div class="class-title">
        <span>交易构成</span>
      </div>
    </div>
    <el-row :gutter="50">
      <el-col :span="12">
        <div>
          <div id="dealUser" style="width:500px;height:300px;" />
        </div>
      </el-col>
      <el-col :span="12">
        <el-table
          :data="dealRiseTableData"
          :header-cell-style="{background:'#eef1f6',}"
          border
          style="width: 100%;margin-top:50px;"
        >
          <el-table-column prop="userType" label align="center" />
          <el-table-column prop="totalSum" label="结算金额(元)" align="center" />
          <el-table-column prop="moneyRise" label="较前一个月涨幅" align="center" />
          <el-table-column prop="userNum" label="用户数" align="center" />
          <el-table-column prop="userRise" label="较前一个月涨幅" align="center" />
        </el-table>
      </el-col>
    </el-row>
    <el-row :gutter="50" style="margin:20px 0;">
      <el-col :span="12">
        <div>
          <div id="orderSum" style="width:600px;height:400px;" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import 'echarts/map/js/china'
import echarts from 'echarts'
export default {
  data() {
    return {
      dealTendencyChart: null,
      dealUserChart: null,
      orderSumChart: null,
      dealList: {
        visitor: '136',
        orderBuyer: '16',
        orderMoney: '566',
        payBuyer: '136',
        payMoney: '336',
        price: '99',
      },
      conversion: {
        firstRatio: '15%',
        secondRatio: '13%',
        thirdlyRatio: '8%'
      },
      dealRiseTableData: [
        {
          userType: '老付费用户',
          totalSum: '3699',
          moneyRise: '+16',
          userNum: '232',
          userRise: '+13%'
        },
        {
          userType: '新付费用户',
          totalSum: '2699',
          moneyRise: '+18',
          userNum: '132',
          userRise: '+19%'
        }
      ],
      dayValue: '',
      WeekValue: '',
      monthValue: '',
      customValue: '',
      timeWay: 'timeDay',
      timeWayOptions: [
        {
          value: 'timeDay',
          label: '自然天'
        }, {
          value: 'timeWeek',
          label: '自然周'
        }, {
          value: 'timeMonth',
          label: '自然月'
        }, {
          value: 'timeCustom',
          label: '自定义'
        }
      ]
    }
  },
  mounted() {
    this.initDealTendencyChart()
    this.initDealUserChart()
    this.initOrderSumChart()
  },
  beforeDestroy() {
    if (!this.tendencyChart) {
      return
    }
    this.tendencyChart.dispose()
    this.tendencyChart = null
  },
  methods: {
    initDealTendencyChart() {
      const chart = document.getElementById('dealTendency')
      chart.style.width = window.innerWidth - 250 + 'px'
      this.dealTendencyChart = echarts.init(chart)
      this.dealTendencyChart.setOption(
        {
          backgroundColor: '#fff',
          title: {
            text: '交易趋势',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            left: '0%'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#57617B'
              }
            }
          },
          legend: {
            icon: 'rect',
            itemWidth: 14,
            itemHeight: 5,
            itemGap: 13,
            show: true,
            data: ['结算金额(元)', '付费用户数', '客单价(元)', '下单用户数', '下单金额', '访客数'],
            selected: { '结算金额(元)': true, '付费用户数': true, '客单价(元)': false, '下单用户数': false, '下单金额': false, '访客数': false },
            x: 'center',
            textStyle: {
              fontSize: 12,
              color: '#353535'
            }
          },
          grid: {
            left: '0%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: ['2019-06-01', '2019-06-02', '2019-06-03', '2019-06-04', '2019-06-05', '2019-06-06', '2019-06-07', '2019-06-08', '2019-06-09', '2019-06-10', '2019-06-11', '2019-06-12']
          }, {
            axisPointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            }
          }],
          yAxis: [
            {
              type: 'value',
              name: '',
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#57617B'
                }
              },
              axisLabel: {
                margin: 10,
                textStyle: {
                  fontSize: 14
                }
              },
              splitLine: {
                lineStyle: {
                  color: '#eee'
                }
              }
            }
          ],
          series: [
            {
              name: '结算金额(元)',
              type: 'line',
              smooth: true,
              show: false,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(137, 189, 27, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(137, 189, 27, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(137,189,27)',
                  borderColor: 'rgba(137,189,2,0.27)',
                  borderWidth: 12

                }
              },
              data: [599.00, 399.00, 299.00, 199.00, 699.00, 499.00, 599.00, 299.00, 599.00, 499.00, 599.00, 299.00]
            },
            {
              name: '付费用户数',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 136, 212, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(0, 136, 212, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(0,136,212)',
                  borderColor: 'rgba(0,136,212,0.2)',
                  borderWidth: 12

                }
              },
              data: [5, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
            },
            {
              name: '客单价(元)',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(251,212,75, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(251,212,75, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(251,212,75)',
                  borderWidth: 12
                }
              },
              data: ['54', '90', '60', '90', '40', '70', '97', '78', '89', '45', '78', '56']
            },
            {
              name: '下单用户数',
              type: 'line',
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(244,102,124, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(244,102,124, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(244,102,124)',
                  borderWidth: 12
                }
              },
              data: [253, 322, 251, 125, 212, 354, 421, 452, 122, 220, 345, 391]
            },
            {
              name: '下单金额',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(137,123,211, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(137,123,211, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(137,123,211)',
                  borderWidth: 12
                }
              },
              data: [65, 35, 75, 65, 145, 111, 64, 75, 86, 96, 102, 84]
            },
            {
              name: '访客数',
              type: 'line',
              yAxisIndex: 0,
              smooth: true,
              symbol: 'circle',
              symbolSize: 5,
              showSymbol: false,
              lineStyle: {
                normal: {
                  width: 1
                }
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(73,204,203, 0.3)'
                  }, {
                    offset: 0.8,
                    color: 'rgba(73,204,203, 0)'
                  }], false),
                  shadowColor: 'rgba(0, 0, 0, 0.1)',
                  shadowBlur: 10
                }
              },
              itemStyle: {
                normal: {
                  color: 'rgb(73,204,203)',
                  borderWidth: 12
                }
              },
              data: [13, 24, 36, 45, 34, 26, 45, 23, 65, 45, 55, 35]
            }
          ]
        }
      )
    },
    initDealUserChart() {
      const chart = document.getElementById('dealUser')
      chart.style.width = window.innerWidth / 2 - 120 + 'px'
      this.dealUserChart = echarts.init(chart)
      this.dealUserChart.setOption(
        {
          color: ['#00A3FF', '#FDD835', '#46D319'],
          title: {
            text: '交易用户构成',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 16,
              color: '#353535'
            },
            x: 'left',
            y: '6%'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: '20%',
            y: 'center',
            data: ['老付费用户', '新付费用户']
          },
          series: [
            {
              name: '{a}',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['20%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '14',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                { value: 335, name: '老付费用户' },
                { value: 210, name: '新付费用户' }
              ]
            }
          ]
        }
      )
    },
    initOrderSumChart() {
      const chart = document.getElementById('orderSum')
      chart.style.width = window.innerWidth - 120 + 'px'
      this.orderSumChart = echarts.init(chart)
      this.orderSumChart.setOption(
        {
          'title': {
            'text': '订单金额分布',
            'left': 'left',
            'y': '10',
            'textStyle': {
              'color': '#353535'
            }
          },
          'backgroundColor': '#fff',
          'color': '#384757',
          'tooltip': {
            'trigger': 'axis',
            'axisPointer': {
              'type': 'cross',
              'crossStyle': {
                'color': '#384757'
              }
            }
          },
          'legend': {
            'data': [
              {
                'name': '待处理',
                'icon': 'circle',
                'textStyle': {
                  'color': '#7d838b'
                }
              }
            ],
            'top': '10%',
            'textStyle': {
              'color': '#fff'
            }
          },
          'xAxis': [
            {
              'type': 'category',
              'data': [
                '0-50',
                '50-100',
                '100-200',
                '200-500',
                '500-1000',
                '1000-1500',
                '1500以上'
              ],
              'axisPointer': {
                'type': 'shadow'
              },
              'axisLabel': {
                'show': true,
                'textStyle': {
                  'color': '#7d838b'
                }
              }
            }
          ],
          'yAxis': [
            {
              'type': 'value',
              'name': '订单数',
              'nameTextStyle': {
                'color': '#7d838b'
              },
              'axisLabel': {
                'show': true,
                'textStyle': {
                  'color': '#7d838b'
                }
              },
              'axisLine': {
                'show': true
              },
              'splitLine': {
                'lineStyle': {
                  'color': '#7d838b'
                }
              }
            }
          ],
          'grid': {
            x: 40,
            y: 100,
            x2: 200,
            y2: 20
          },
          'series': [
            {
              'name': '订单数',
              'type': 'bar',
              'data': [
                140,
                160,
                360,
                460,
                188,
                226,
                300
              ],
              'barWidth': 'auto',
              'itemStyle': {
                'normal': {
                  'color': {
                    'type': 'linear',
                    'x': 0,
                    'y': 0,
                    'x2': 0,
                    'y2': 1,
                    'colorStops': [
                      {
                        'offset': 0,
                        'color': 'rgba(255,37,117,0.7)'
                      },
                      {
                        'offset': 0.5,
                        'color': 'rgba(0,133,245,0.7)'
                      },
                      {
                        'offset': 1,
                        'color': 'rgba(0,133,245,0.3)'
                      }
                    ],
                    'globalCoord': false
                  }
                }
              }
            }
          ]
        }
      )
    }

  }
}
</script>

<style lang="scss" scoped>
.flow-box {
  padding: 10px;
  padding-bottom: 40px;
  .deal-list {
    position: relative;
    .deal-item {
      height: 80px;
      .deal-item-class {
        float: left;
        min-width: 188px;
        padding: 16px 0 16px 40px;
        .item-title {
          position: relative;
          font-size: 12px;
          color: #666666;
          line-height: 20px;
        }
      }
    }
    .deal-item.nth-1 {
      background: rgba(42, 117, 237, 0.08);
    }
    .deal-item.nth-2 {
      background: rgba(42, 117, 237, 0.06);
    }
    .deal-item.nth-3 {
      background: rgba(42, 117, 237, 0.04);
    }
    .deal-pic {
      position: absolute;
      right: 70px;
      top: 0px;
      height: 100%;
      width: 460px;
      .pic {
        position: absolute;
        top: 0;
        right: 20px;
        bottom: 0;
        height: 240px;
        // background-image: url(https://static-resource.xiaoeknow.com/b_static/dataAnalysis/newDataAnalysis/images/charts.png);
        background-image: url(/src/assets/analyze_data/charts.png);
        background-size: 100% 100%;
        width: 100%;
        z-index: 9;
      }
    }
    .order-growth {
      position: absolute;
      top: 75px;
      right: 120px;
      z-index: 9;
    }
    .order-pay-growth {
      position: absolute;
      top: 155px;
      right: 148px;
      z-index: 9;
    }
    .pay-growth {
      position: absolute;
      top: 180px;
      right: 30px;
      z-index: 9;
    }
    .growth-title {
      color: #666666;
      line-height: 20px;
    }
    .percentage {
      margin-top: 15px;
      font-size: 14px;
      line-height: 22px;
      color: #353535;
    }
  }
}
</style>
